<script>
import { getAdminListFn, addAdminFn, delAdminFn,editAdminFn } from "@/api/user";
// import { ElMessage } from 'element-plus'
import { routes } from '@/router'//因为router里面只有index.js一个文件，所以可以默认简写直接写道router不用携带router下面的index.js


export default {
    mounted() {
        getAdminListFn().then(res => {
            console.log(22, res.data);
            this.adminList = res.data
        })
    },
    data() {
        return {
            adminList: [],//所有数据
            currentPage: 1,//设置默认的当前页
            drawer: false,//是否显示添加视图
            menus: routes[0].children,
            formData: {//存放管理员信息用
                adminname: '',
                password: '',
                role: '',
                checkedKeys: []
            }
        }
    },
    computed: {
        tableData() {
            return this.adminList.slice((this.currentPage - 1) * 10, (this.currentPage - 1) * 10 + 10)
        }
    },
    methods: {
        //编辑管理员的方法
        edit() {
            // editAdminFn().then(res=>{
            //     console.log(89,res.data);
            //     if(res.code==200){
            //         this.drawer=false
            //         getAdminListFn().then(res => {
            //             this.adminList = res.data
            //             //3.清除原来的数据
            //             this.close()
            //         })
            //     }
            // })
            this.formData.adminname = admin.adminname
            this.formData.password = admin.password
            this.formData.role = admin.role
            this.formData.checkedKeys = admin.checkedKeys

            const list = []
            admin.checkedKeys.forEach(parent => {
                if (parent.children) {
                    parent.children.forEach(item => {
                        list.push(item.path)
                    })
                }
            })

            
        },
        //删除 管理员的方法
        delClick(row) {
            console.log('row.adminid', row.adminid);
            delAdminFn({
                adminid: row.adminid
            }).then(res => {
                console.log('res123', res);
                getAdminListFn().then(res => {
                    this.adminList = res.data
                })
            })
        },
        // delClick(row) {
        //     console.log(row.adminid);
        //     delAdminFn({
        //         adminid: row.adminid
        //     }).then(res => {
        //         // console.log(res);
        //         ElMessage.info(res.message)
        //         // 删除完成后进行数据更新
        //         getAdminListFn().then(res => {
        //             this.adminList = res.data
        //         })
        //     })
        // },
        formatCheckedKeys() {
            const list = this.$refs.treeRef.getCheckedNodes(true)//拿到所有选中的子节点
            // console.log(3,list);
            const tempList = []//父节点
            const resultList = []//定义最终数组

            list.forEach(item => {
                //list的item就是 用户列表
                // 去找父节点？
                const parent = this.menus.find(mitem => {
                    //最开始的所有父节点里面找子节点是否存在
                    //账号管理
                    // console.log(2,mitem);
                    return mitem.children.some(child => {
                        return child.label = item.label
                    })
                })

                if (tempList.includes(parent.label)) {
                    //父节点存在  先找父节点 然后把子节点加进来
                    const par = resultList.find(item =>
                        item.label == parent.label
                    )
                    par.children.push(item)
                } else {
                    //父节点不存在 把父节点和子节点都加入进来
                    tempList.push(parent.label)
                    //加子节点
                    resultList.push({
                        label: parent.label,
                        path: parent.path,
                        children: [item]
                    })
                }
                console.log('resultList', resultList);
                this.formData.checkedKeys = resultList
            })
        },
        //设置关闭drawer的方法
        close() {
            this.formData = {//存放管理员信息用
                adminname: '',
                password: '',
                role: '',
                checkedKeys: []
            }
            // 清除树形组件的选中项,设置的时候要保证组件上要有 node-key 属性
            this.$refs.treeRef.setCheckedNodes([])
        },
        addClick() {
            // console.log('formData',this.formData)//可以拿到adminname 但是拿不到checkedkeys
            // const list=this.$refs.treeRef
            // console.log('this.$refs.treeRef',list);//去找到里面的方法 找

            this.formatCheckedKeys()

            addAdminFn(this.formData).then(res => {
                console.log(res);
                if (res.code == 200) {
                    //1.关闭抽屉效果
                    this.drawer = false
                    //2.刷新表格最新数据
                    getAdminListFn().then(res => {
                        this.adminList = res.data
                        //3.清除原来的数据
                        this.close()
                    })

                }

            })
        }
    }
}
</script>
<template>
    <div>
        <h1>管理员列表 <el-button type="primary" @click="drawer = true">添加管理员</el-button></h1>
        <el-table :data="tableData" style="width: 100%">
            <el-table-column type="index" label="序号" width="180">
                <template #default="scope">
                    {{ (currentPage - 1) * 10 + (scope.$index + 1) }}
                </template>
            </el-table-column>
            <el-table-column prop="adminname" label="管理员名称" width="180"></el-table-column>
            <el-table-column prop="role" label="管理员权限" width="180">
                <template #default="{ row, column, $index }">
                    <!-- {{ row.role }} -->
                    <el-tag v-if="row.role == 1" type="primary">普通管理员</el-tag>
                    <el-tag v-else type="success">超级管理员</el-tag>
                </template>
            </el-table-column>
            <el-table-column label="操作" width="180">
                <template #default="{ row }">
                    <el-button type="success" @click="drawer=true">编辑</el-button>

                    <el-popconfirm @confirm="delClick(row)" width="220" confirm-button-text="确认" cancel-button-text="取消"
                        :title="`你确定要删除${row.adminname}吗 `">
                        <template #reference>
                            <el-button type="danger">删除</el-button>
                        </template>
                    </el-popconfirm>

                </template>

            </el-table-column>
        </el-table>
        <!-- 分页 -->
        <el-pagination v-model:current-page="currentPage" background layout="prev, pager, next" :total="adminList.length" />
        <!-- 添加管理员 -->
        <el-drawer v-model="drawer" title="添加管理员" direction="rtl">
            <el-form label-width="auto">
                <el-form-item label="管理员账号">
                    <el-input v-model="formData.adminname" placeholder="请输入管理员名称" />
                </el-form-item>
                <el-form-item label="管理员密码">
                    <el-input v-model="formData.password" placeholder="请输入管理员密码" />
                </el-form-item>
                <el-form-item label="角色权限">
                    <el-select placeholder="请选择管理员权限" v-model="formData.role">
                        <el-option label="普通管理员" value="1" />
                        <el-option label="超级管理员" value="2" />
                    </el-select>
                </el-form-item>

            </el-form>
            <el-tree ref="treeRef" :data="menus" show-checkbox default-expand-all node-key="path" />

            <el-button @click="addClick">添加管理员</el-button>
        </el-drawer>

        <!-- 编辑管理员 -->
        <el-drawer v-model="drawer" title="编辑" :direction="rtl" >
            <el-form label-width="auto">
                <el-form-item label="管理员账号" disabled>
                    <el-input v-model="formData.adminname" placeholder="请输入管理员名称" />
                </el-form-item>
                <el-form-item label="管理员密码" disabled>
                    <el-input v-model="formData.password" placeholder="请输入管理员密码" />
                </el-form-item>
                <el-form-item label="角色权限">
                    <el-select placeholder="请选择管理员权限" v-model="formData.role">
                        <el-option label="普通管理员" value="1" />
                        <el-option label="超级管理员" value="2" />
                    </el-select>
                </el-form-item>

            </el-form>
            
            <el-tree ref="treeRef" :data="menus" show-checkbox default-expand-all node-key="path" />

            <el-button @click="edit">编辑管理员</el-button>
        </el-drawer>
    </div>
</template>